<template>
  <ex-dialog
    width="800px"
    class="ex-diolog"
    title="新增日常消费送FB活动"
    :visible="visible"
    @closeDialog="handleClose"
  >
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <!-- <el-form-item label="子账号编号" prop="pass">
				<div class="textData">000000000000</div>
			</el-form-item> -->
      <el-form-item label="参与活动的店铺：" prop="activityShopType">
        <el-radio-group
          v-model="ruleForm.activityShopType"
          class="radioType"
          @change="handleActivityShopType"
        >
          <el-radio :label="1">全平台</el-radio>
          <el-radio :label="2">
            <span class="star">指定店铺</span>
            <el-form-item
              :prop="ruleForm.activityShopType == 2 ? 'shopList' : ''"
            >
              <el-select
                multiple
                v-model="ruleForm.shopList"
                :disabled="ruleForm.activityShopType == 2 ? false : true"
                @change="changeShopId"
                placeholder="请选择"
                autocomplete="off"
              >
                <el-option
                  v-for="item in adminShopList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="参与活动时间：" prop="timeArr">
        <el-date-picker
          v-model="ruleForm.timeArr"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="seleteTime"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="设置活动内容：" prop="activityType">
        <el-radio-group
          v-model="ruleForm.activityType"
          class="radioType"
          @change="handleActivityType"
        >
          <el-radio :label="1">
            <div>
              单笔消费满<el-input
                :disabled="ruleForm.activityType == 1 ? false : true"
                v-model="singleMoney"
              ></el-input
              >元, 赠送<el-input
                :disabled="ruleForm.activityType == 1 ? false : true"
                v-model="singleGiveAmount"
              ></el-input
              >个FB
            </div>
          </el-radio>
          <el-radio :label="2">消费多少送多少FB（取整，去掉小数）</el-radio>
          <el-radio :label="3">
            <div>
              每消费<el-input
                :disabled="ruleForm.activityType == 3 ? false : true"
                v-model="everyMoney"
              ></el-input
              >元, 赠送<el-input
                :disabled="ruleForm.activityType == 3 ? false : true"
                v-model="everyGiveAmount"
              ></el-input
              >个FB
            </div>
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="活动限制：" prop="activityLimit">
        <el-radio-group
          v-model="ruleForm.activityLimit"
          class="radioType"
          @change="handleActivityLimit"
        >
          <el-radio :label="1">无</el-radio>
          <el-radio :label="2">每人每天每店1笔</el-radio>
          <el-radio :label="3">
            <div>
              每日赠送<el-input
                :disabled="ruleForm.activityLimit == 3 ? false : true"
                v-model="ruleForm.limitCount"
              ></el-input
              >笔
            </div>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-if="pathType == 'add'"
          >确认</el-button
        >
        <el-button
          type="primary"
          @click="editForm('ruleForm')"
          v-if="pathType == 'edit'"
          >修改</el-button
        >
        <el-button @click="handleClose('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from "@/components/Loading/index";
// api
import {
  adminShopSelectList,
  addConsumption,
  consumptionDetail,
  editConsumption,
} from "@/api/operateActive";

export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else {
        // var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        // if (reg.test(value) === false) {
        //   callback(new Error('请输入正确的手机号码'));
        // }
        if (value.length != 11) {
          callback(new Error("请输入正确的手机号码"));
        }
        callback();
      }
    };
    return {
      adminShopList: [],
      merchantId: "",
      interests: "",
      cardName: "",
      shopName: "",
      basePower: "",
      singleMoney: "",
      singleGiveAmount: "",
      everyMoney: "",
      everyGiveAmount: "",
      ruleForm: {
        timeArr: [],
        startTime: "", //活动开始时间
        endTime: "", //活动结束时间
        activityType: "", //活动类型（1 单笔消费限制 2 消费多少送多少 3 消费金额限制）
        content: "", //活动内容
        money: "", //消费金额
        giveAmount: "", //赠送FB数量
        activityLimit: "", //活动限制类型（1无限制 2 每日限制1笔 3 每日限制赠送总数）
        activityLimitContent: "", //活动限制内容
        activityShopType: "", //活动店铺类型不能为空
        limitCount: "", //限制数量
        shopList: [], //店铺数组
      },
      rules: {
        activityShopType: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        shopList: [
          { required: true, message: "请选择店铺", trigger: "change" },
        ],
        timeArr: [{ required: true, message: "请选择时间", trigger: "change" }],
        activityType: [
          { required: true, message: "请选择活动", trigger: "change" },
        ],
        activityLimit: [
          { required: true, message: "请选择活动限制", trigger: "change" },
        ],
        singleMoney: [
          { required: true, message: "请选择活动限制", trigger: "change" },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.getAdminShop();
    if (this.pathType == "edit") {
      this.getDetail();
    }
  },
  methods: {
    usedInPar(str) {
      console.log(str);
    },
    //获取店铺
    getAdminShop() {
      var data = {
        pageSize: 1000,
        merchantId: this.merchantId,
      };
      adminShopSelectList(data)
        .then((res) => {
          const { result } = res;
          console.log("adminShopList", result);
          this.adminShopList = result.records;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    //详情
    getDetail() {
      consumptionDetail(this.id)
        .then((res) => {
          const { result } = res;
          console.log("consumptionDetail", result);
          this.ruleForm.timeArr = [result.startTime, result.endTime];
          this.ruleForm.startTime = result.startTime;
          this.ruleForm.endTime = result.endTime;
          this.ruleForm.activityType = parseInt(result.activityType);
          this.ruleForm.content = result.content;
          this.ruleForm.money = result.money;
          this.ruleForm.giveAmount = result.giveAmount;
          this.ruleForm.activityLimit = parseInt(result.activityLimit);
          this.ruleForm.activityLimitContent = result.activityLimitContent;
          this.ruleForm.activityShopType = parseInt(result.activityShopType);
          if (this.ruleForm.activityType == 1) {
            this.singleMoney = this.ruleForm.money;
            this.singleGiveAmount = this.ruleForm.giveAmount;
          } else if (this.ruleForm.activityType == 3) {
            this.everyMoney = this.ruleForm.money;
            this.everyGiveAmount = this.ruleForm.giveAmount;
          }
          // this.singleMoney = this.ruleForm.money
          // this.singleGiveAmount = this.ruleForm.giveAmount
          this.ruleForm.limitCount = result.limitCount;
          this.ruleForm.shopList = result.shopList;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 选择店铺
    changeShopId(event) {
      this.ruleForm.shopList = event;
      this.adminShopList.forEach((item) => {
        if (item.id == event) {
          this.merchantId = item.merchantId;
        }
      });
    },
    //参与活动的店铺类型
    handleActivityShopType(event) {
      if (event == 1) {
        this.ruleForm.shopList = [];
      }
    },
    //设置活动内容
    handleActivityType(event) {
      console.log("event", event);
      if (event == 1) {
        this.everyMoney = "";
        this.everyGiveAmount = "";
        this.ruleForm.content = `单笔消费满${this.ruleForm.money}元, 赠送${this.ruleForm.giveAmount}个FB`;
      } else if (event == 2) {
        this.ruleForm.content = "消费多少送多少FB（取整，去掉小数）";
      } else if (event == 3) {
        this.singleMoney = "";
        this.singleGiveAmount = "";
        this.ruleForm.content = `每消费${this.ruleForm.money}元, 赠送${this.ruleForm.giveAmount}个FB`;
      }
    },
    //活动限制
    handleActivityLimit(event) {
      console.log("event", event);
      if (event == 1) {
        this.ruleForm.activityLimitContent = `无`;
      } else if (event == 2) {
        this.ruleForm.activityLimitContent = "每人每天每店1笔";
      } else if (event == 3) {
        this.ruleForm.activityLimitContent = `每日赠送${this.ruleForm.limitCount}笔`;
      }
    },
    //选择时间
    seleteTime(event) {
      console.log("event", event);
      this.ruleForm.startTime = event[0];
      this.ruleForm.endTime = event[1];
    },

    //新建子账号
    submitForm(formName) {
      console.log("formName", formName);
      this.$refs[formName].validate((valid) => {
        console.log("valid", valid);
        if (valid) {
          this.ruleForm.money = this.singleMoney
            ? this.singleMoney
            : this.everyMoney;
          this.ruleForm.giveAmount = this.singleGiveAmount
            ? this.singleGiveAmount
            : this.everyGiveAmount;
          var data = {
            ...this.ruleForm,
          };
          addConsumption(data)
            .then((res) => {
              this.handleSuccess("创建成功");
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改
    editForm(formName) {
      console.log("formName", formName);
      console.log(this.ruleForm.money, this.singleMoney);
      console.log(this.ruleForm.activityType);
      // return
      this.$refs[formName].validate((valid) => {
        console.log("valid", valid);
        if (valid) {
          this.ruleForm.money = this.singleMoney
            ? this.singleMoney
            : this.everyMoney;
          this.ruleForm.giveAmount = this.singleGiveAmount
            ? this.singleGiveAmount
            : this.everyGiveAmount;
          // this.ruleForm.money = (this.ruleForm.activityType==1&&this.ruleForm.activityType!=2) ? this.singleMoney : this.everyMoney
          // this.ruleForm.giveAmount = (this.ruleForm.activityType==1&&this.ruleForm.activityType!=2) ? this.singleGiveAmount : this.everyGiveAmount
          var data = {
            id: this.id,
            ...this.ruleForm,
          };
          editConsumption(data)
            .then((res) => {
              this.handleSuccess("修改成功");
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
      // this.$refs[formName].resetFields();
    },
    //确认
    handleConfirm() {
      this.$emit("success", "你好");
    },
    handleSuccess(msg) {
      if (msg === "已拒绝") {
        var type = "error";
      } else {
        var type = "success";
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose();
          this.$emit("success");
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }
  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.el-select {
  width: 350px;
}
.radioType {
  display: flex;
  flex-direction: column;
  .el-radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 14px;
  }
  .el-radio__label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .el-input {
    width: 100px;
    margin: 0 10px;
  }
  .el-radio {
    height: 36px;
  }
  ::v-deep .el-radio__label {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  .star {
    margin-right: 10px;
  }
}
</style>
